<template>
	<view>
		<picker mode="selector" :range="array" :value="index" @change="bindPickerChange">
			<view class="card between">
				<view style="font-weight: bold;">充值类型</view>
				<view class="flex" style="align-items: center;">
					<view>{{ typeName }}</view>
					<image src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
				</view>

			</view>
		</picker>
		<view class="card">
			<view class="title">充值金额</view>
			<view class="flex inputBox">
				<view class="flex">￥</view><input type="number" v-model="money" placeholder="请输入充值金额"
					placeholder-style="color:#CCCCCC;font-size:30rpx;" />
			</view>
			<view class="flex-center">
				<view class="submitBtn flex" @click="onSetImmediatePayment">确认充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		topUp,
		setImmediatePayment,
		getOrderPayStatus,
		getAppConfig
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isAudit: false,
				webview: '',
				money: '',
				array: ['微信'], //'支付宝', '云闪付', '云闪付APP'
				index: 0,
				typeName: '微信',
				payorderid: "",
				orderid: "",
				typeid: 2,
				orderStatusTimer: 0
			}
		},

		onShow() {
			if (this.typeid == 203) {
				this.orderStatusTimer = setInterval(() => {
					this.getOrderStatus();
				}, 1000)
			}
		},
		onHide() {
			if (this.typeid == 203 && this.orderStatusTimer > 0) {
				clearInterval(this.orderStatusTimer)
			}
		},
		async onLoad(opt) {
			const appConfig = await getAppConfig()
			this.array = appConfig.topUpPayList
			this.typeName = this.array[0]

			switch (this.typeName) {
				case "支付宝":
					this.typeid = 3;
					break;
				case "微信":
					this.typeid = 2;
					break;
				case "云闪付":
					this.typeid = 203;
					break;
				case "云闪付APP":
					this.typeid = 204;
					break;
			}
		},
		methods: {
			async onGetHomeCheckLogin() {
				let that = this;
				const res = await getPersonalCenter(`s=/ApiIndex/homechecklogin`)
				const {
					status,
					msg
				} = res.data
			
				if (status == 1 || status == 3) {
					this.isAudit = false;
				}
			},
			// 立即支付参数
			async goPay() {
				console.log({
					op: 'submit',
					orderid: this.payorderid,
					typeid: this.typeid,
				})
				const res = await setImmediatePayment('s=/ApiPay/pay', {
					op: 'submit',
					orderid: this.payorderid,
					typeid: this.typeid,
				})
				const {
					data,
					status,
					msg
				} = res.data
				console.log(res)
				if (status == 2 || status == 1) {
					// console.log(res, "888888", msg)
					// 微信支付
					if (this.typeName == '微信') {
						this.onAliOrWchatPay(data.data, 'wxpay')
					}
					if (this.typeName == '云闪付APP') {
						// #ifdef APP-ANDROID
						this.onUPPay(data.prepay_id, 'uppay')
						// #endif
						// #ifdef APP-IOS
						this.showToast('苹果手机不支持云闪付APP支付~')
						// #endif
					}
					// 支付宝支付
					if (this.typeName == '支付宝') {
						// #ifdef H5
						document.querySelector('body').innerHTML = data;
						document.forms[0].submit()
						// #endif
						// #ifdef APP-PLUS
						this.onAliOrWchatPay(data, 'alipay')
						// #endif
					}

					if (this.typeName == '云闪付') {
						var that = this
						uni.getSystemInfo({
							success(res) {
								if (res.platform == 'android') {
									var clickButton = function() {
										that.webview.close();
									}
									that.webview = plus.webview.create(data.prepay_id, "payweb", {
										titleNView: {
											autoBackButton: false,
											titleText: '',
											buttons: [{
												type: 'close',
												float: 'left',
												onclick: clickButton
											}]
										}
									})
									that.webview.show();
									that.orderStatusTimer = setInterval(async () => {
										await that.getOrderStatus()
									}, 1000)
								} else {
									plus.runtime.openURL(data.prepay_id, function(openUrlRes) {
										console.log(openUrlRes);
									});
									that.orderStatusTimer = setInterval(async () => {
										await that.getOrderStatus()
									}, 1000)
								}
							},
						});
					}
				} else {
					this.showToast(msg)
				}
			},
			// 立即支付
			async onSetImmediatePayment() {
				if (!this.money) {
					this.showToast('充值金额不能为空~')
					return
				}
				const res = await topUp('s=/ApiMoney/recharge', {
					money: this.money,
					typeid: this.typeid
				})
				console.log(res)
				const {
					payorderid,
					orderid,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.payorderid = payorderid
					this.orderid = orderid
					this.goPay()
				} else {
					this.showToast(msg)
				}
			},
			async onUPPay(tn, payType) {
				
				const sappPlugin = uni.requireNativePlugin('sapppay');
				console.log(sappPlugin)
				sappPlugin.pay({
					tn: tn,
					serverMode: "00"
				}, (res) => {
					if (res.result == 'success') {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.onSkip('/package/mine/myBalance')
						}, 2000)
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				})
			},
			async onAliOrWchatPay(data, payType) {
				uni.requestPayment({
					provider: payType,
					orderInfo: data,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.onSkip('/package/mine/myBalance')
						}, 2000)
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				});
			},
			bindPickerChange(e) {
				this.typeName = this.array[e.detail.value]
				switch (this.typeName) {
					case "支付宝":
						this.typeid = 3;
						break;
					case "微信":
						this.typeid = 2;
						break;
					case "云闪付":
						this.typeid = 203;
						break;
					case "云闪付APP":
						this.typeid = 204;
						break;
				}
			},
			async getOrderStatus() {
				const res = await getOrderPayStatus('s=/ApiPay/paystatus', {
					orderid: this.payorderid
				})
				const {
					id,
					status,
					msg
				} = res.data
				console.log(res)
				if (status == 1) {
					clearInterval(this.orderStatusTimer)

					try {
						this.webview.close()
					} catch (e) {}

					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.onSkip('/package/mine/myBalance')
					}, 2000)

				}
			},
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
		padding: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.submitBtn {
		width: 50%;
		margin-top: 107rpx;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 60rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.title {
		font-size: 33rpx;
		font-weight: bold;
	}

	.card {
		background: #fff;
		padding: 24rpx 50rpx;
		// #ifdef APP-PLUS
		margin-right: 60rpx;
		// #endif
		font-size: 32rpx;
		border-radius: 30rpx;
		margin-bottom: 60rpx;

		image {
			width: 16rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}

	.inputBox {
		height: 130rpx;
		border-bottom: 1px solid #F5F5F5;

		view {
			font-size: 40rpx;
			align-items: center;
		}

		input {
			padding-left: 40rpx;
			font-size: 46rpx;
			height: 130rpx;
			width: 100%;
		}

	}
</style>